<template>
  <h1>2021 GDP Top 5</h1>
  <div class="container">
    <GdpBar1 :gdpData="GdpDataRef"/>
    <GdpBar2 :gdpData="GdpDataRef"/>
  </div>
  <div class="controls">
    <div class="item" v-for="item in GdpDataRef" :key="item.country">
      <label>{{ item.country }}</label>
      <input type="number" step="0.001" min="0" v-model="item.value" />
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import GdpBar1 from "../components/GdpBar1.vue";
import GdpBar2 from "../components/GdpBar2.vue";
export default {
  components: {
    GdpBar1,
    GdpBar2,
  },
  setup() {
    let GdpDataRef = ref([
      {
        country: "美国",
        value: 21.428,
      },
      {
        country: "中国",
        value: 14.343,
      },
      {
        country: "日本",
        value: 5.082,
      },
      {
        country: "德国",
        value: 3.846,
      },
      {
        country: "印度",
        value: 2.875,
      },
    ]);
    return {
      GdpDataRef,
    };

    // const getData = () => {
    //   const data = fetch("../assets/gdp.json").then((res) => res.json());
    //   console.log(data);
    // };
    // getData();
  },
};
</script>
<style scoped>
.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.controls {
  margin: 1em;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.item {
  margin: 1em;
}
.item label {
  margin: 0 1em;
}
.item input {
  height: 26px;
  font-size: 14px;
}
h1 {
  text-align: center;
}
</style>
